<!-- 地址回显 -->
<template>
  <view class="">
    <view class="" @click="onShowPicker">
      <u--input
        :placeholder="placeholder"
        :placeholderClass="placeholderClass"
        :placeholderStyle="placeholderStyle"
        :inputAlign="inputAlign"
        :fontSize="fontSize"
        :color="color"
        :prefixIcon="prefixIcon"
        :prefixIconStyle="prefixIconStyle"
        :suffixIcon="suffixIcon"
        :suffixIconStyle="suffixIconStyle"
        :border="border"
        :shape="shape"
        :customStyle="customStyle"
        v-model="title"
        disabled
        :disabledColor="disabledColor"
      ></u--input>
    </view>

    <!-- 使用了uview1的组件 -->
    <pickerr mode="region" v-model="showPicker" :area-code="areaCode" @confirm="onConfirm"></pickerr>
  </view>
</template>

<script>
import address from '@/utils/address.js'
import pickerr from '@/components/picker/pickerr.vue'
export default {
  data() {
    return {
      showPicker: false,
      title: '', // 选中的标题名称
      address: address,
      areaCode: [],
    }
  },
  components: {
    pickerr,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    // 编号（不知道啥玩意后台没有备注）
    contractId: {
      type: [String, Number],
      default: '',
    },
    // 对象字段
    objectField: {
      type: [String],
      default: 'basicForm.yzdw',
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 选中的值
    value: {
      type: [String, Number],
      default: '',
    },
    // 输入框为空时的占位符
    placeholder: {
      type: [String, Number],
      default: '请选择',
    },
    // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
    placeholderClass: {
      type: [String],
      default: '',
    },
    // 指定placeholder的样式，字符串/对象形式，如"color: red;"
    placeholderStyle: {
      type: [String, Object],
      default: 'color: #C0C4CC'
    },
    // 输入框内容对齐方式 - left | center | right
    inputAlign: {
      type: [String],
      default: 'left',
    },
    // 输入框字体的大小
    fontSize: {
      type: [String, Number],
      default: '15px',
    },
    // 输入框字体颜色
    color: {
      type: [String],
      default: '#303133',
    },
    // 输入框前置图标
    prefixIcon: {
      type: [String],
      default: '',
    },
    // 前置图标样式，对象或字符串
    prefixIconStyle: {
      type: [String, Object],
      default: '',
    },
    // 输入框前置图标
    suffixIcon: {
      type: [String],
      default: '',
    },
    // 前置图标样式，对象或字符串
    suffixIconStyle: {
      type: [String, Object],
      default: '',
    },
    // 边框类型，surround-四周边框，bottom-底部边框，none-无边框
    border: {
      type: [String],
      default: 'surround',
    },
    // 输入框形状，circle-圆形，square-方形
    shape: {
      type: [String],
      default: 'square',
    },
    customStyle: {
      type: [Object],
      default: () => {},
    },
  },
  watch: {
    // 监听value是否有值
    value: {
      handler(newVal, oldVal) {
        var addressDetail = ''
        var arr = newVal?newVal.split(','): []
        if (newVal && arr.length === 1) {
          arr.length = 0
          const code1 = newVal.slice(0, 2)
          const code2 = newVal.slice(2, 4)
          const code3 = newVal.slice(4, 5)
          arr.push(code1)
          arr.push(code1 + code2)
          arr.push(code2 + code3)
        }
        if (newVal) {
          this.areaCode = arr
        } else {
          this.areaCode = ['34', '3401', '340123']
        }
        this.address.map((value) => {
          if (arr[0] && value.code == arr[0]) {
            addressDetail = value.name
            value.children.map((val) => {
              if (arr[1] && val.code == arr[1]) {
                addressDetail = addressDetail + '/' + val.name
                val.children.map((item) => {
                  if (arr[2] && item.code == arr[2]) {
                    addressDetail = addressDetail + '/' + item.name
                  }
                })
              }
            })
          }
        })
        this.title = addressDetail
      },
      immediate: true,
    },
  },
  computed: {
    // 当是disabled为true改变禁用的颜色
    disabledColor() {
      if (this.disabled) {
        return '#f5f7fa'
      } else {
        return '#FFFFFF'
      }
    },
  },
  methods: {
    onShowPicker() {
      if (this.disabled) return
      this.showPicker = true
    },

    onConfirm(item) {
      this.title = ''
      var id = ''
      if (item.province.label) {
        this.title = item.province.label
        id = item.province.value
      }
      if (item.city.label) {
        this.title = this.title + '/' + item.city.label
        id = id + ',' + item.city.value
      }
      if (item.area.label) {
        this.title = this.title + '/' + item.area.label
        id = id + ',' + item.area.value
      }
      this.$emit('change', id)
    },
  },
  mounted() {
    //初始化数据
    // this.queryDictModelByCodes(this.dictName);
  },
}
</script>

<style lang="scss" scoped>
</style>